<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>迁移图</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="mapv" src="./static/libs/include-cesium-local.js"></script>
  <!--引用示例页面样式表-->
  <link rel="stylesheet" href="./static/demo/cesium/style.css" />
</head>

<body>
  <div id="GlobeView"></div>
  <script>
    var webGlobe = new Cesium.WebSceneControl("GlobeView", {
      terrainExaggeration: 1,
    });
    var blueImage = new Cesium.UrlTemplateImageryProvider({
      url:
        "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
      tilingScheme: new Cesium.WebMercatorTilingScheme(),
      maximumLevel: 12,
    });
    webGlobe.viewer.imageryLayers.addImageryProvider(blueImage);

    var map = webGlobe.viewer;

    initMap();
    initMapv();

    function initMap() {
      var center = Cesium.Cartesian3.fromDegrees(114, 30, 5000000.0);
      map.scene.camera.setView({
        destination: center,
      });
    }

    function initMapv() {
      var data = [];
      var timeData = [];

      function curive(fromPoint, endPoint, n) {
        var delLng = (endPoint.lng - fromPoint.lng) / n;
        var delLat = (endPoint.lat - fromPoint.lat) / n;

        for (var i = 0; i < n; i++) {
          var pointNLng = fromPoint.lng + delLng * i;
          var pointNLat = fromPoint.lat + delLat * i;
          timeData.push({
            geometry: {
              type: "Point",
              coordinates: [pointNLng, pointNLat],
            },
            count: 1,
            time: i,
          });
        }
      }

      // 构造数据
      $.ajax({
        url: "./static/data/mapv/qianxi-time.csv",
        success: function (rs) {
          var items = rs.split("|");
          for (var i = 0; i < items.length; i++) {
            var itemArr = items[i].split(/\n/);
            for (var k = 0; k < itemArr.length; k++) {
              if (!!itemArr[k]) {
                var item = itemArr[k].split(/\t/);
                if (item[0] === "起点城市" || item[0] === "迁出城市") {
                  var cityBegin = item[1];
                }
                if (
                  item[0] !== "起点城市" ||
                  (item[0] !== "迁出城市" && item.length > 1)
                ) {
                  var cityCenter1 = mapv.utilCityCenter.getCenterByCityName(
                    item[0].replace(/市|省/, "")
                  );
                  var cityCenter2 = mapv.utilCityCenter.getCenterByCityName(
                    cityBegin.replace(/市|省/, "").trim()
                  );
                  if (cityCenter1) {
                    if (Math.random() > 0.7) {
                      curive(cityCenter2, cityCenter1, 50);
                    }
                    data.push({
                      geometry: {
                        type: "LineString",
                        coordinates: [
                          [cityCenter1.lng, cityCenter1.lat],
                          [cityCenter2.lng, cityCenter2.lat],
                        ],
                      },
                      count: 100 * Math.random(),
                    });
                  }
                }
              }
            }
          }
          // 构建对应的dataset
          var dataSet = new mapv.DataSet(data);
          // 设置对应的参数
          // https://github.com/huiyan-fe/mapv/blob/master/API.md
          var options = {
            context: "2d", //cesium必须设置画布为2d
            cesium: {
              postRender: true,
              postRenderFrame: 0,
            },
            strokeStyle: "rgba(55, 50, 250, 0.3)",
            globalCompositeOperation: "lighter",
            shadowColor: "rgba(55, 50, 250, 0.5)",
            methods: {
              click: function (item) { },
            },
            gradient: {
              0: "rgba(55, 50, 250, 0)",
              1: "rgba(55, 50, 250, 1)",
            },
            lineWidth: 0.2,
            draw: "intensity", // 绘制强度图
          };

          // 声明cesium的mapv图层并将其显示到三维球上
          var linelayer = new CesiumZondy.Overlayer.MapvLayer(
            map,
            dataSet,
            options
          );
          // 构建对应的dataset
          var dataSet = new mapv.DataSet(timeData);
          var options = {
            context: "2d", //cesium必须设置画布为2d
            fillStyle: "rgba(255, 250, 250, 0.9)",
            size: 0.5,
            animation: {
              type: "time",
              stepsRange: {
                start: 0,
                end: 50,
              },
              trails: 1,
              duration: 5,
            },
            draw: "simple", // 绘制简单图
          };
          // 声明cesium的mapv图层并将其显示到三维球上
          var maplayer = new CesiumZondy.Overlayer.MapvLayer(
            map,
            dataSet,
            options
          );
        },
      });
    }
  </script>
</body>

</html>